<script lang="ts" setup>
// 👉 引入 Vue 的组合式 API
import { ref, reactive, computed, watch, onMounted, onBeforeMount, onUpdated, onBeforeUpdate, onBeforeUnmount, onUnmounted, onActivated, onDeactivated } from 'vue'

// 👉 定义组件的 Props（如果有）
defineProps<{}>()

// 👉 定义组件的 Emits（如果有）
const emit = defineEmits<{}>()

// 👉 定义响应式状态
const exampleRef = ref(null) // 示例 ref
// const state = reactive({}) // 示例 reactive

// 👉 计算属性
// const computedValue = computed(() => {})

// 👉 侦听器
// watch(() => source, (newVal, oldVal) => {})

// 👉 生命周期钩子
onBeforeMount(() => {
  // 组件挂载前
})

onMounted(() => {
  // 组件已挂载
})

onBeforeUpdate(() => {
  // 更新前
})

onUpdated(() => {
  // 更新后
})

onBeforeUnmount(() => {
  // 卸载前
})

onUnmounted(() => {
  // 卸载完成
})

onActivated(() => {
  // keep-alive 组件激活时调用
})

onDeactivated(() => {
  // keep-alive 组件失活时调用
})
</script>

<template>
  <!-- 👉 组件模板 -->
  <div class="">222</div>
</template>

<style lang="scss" scoped>
/* 👉 组件样式（作用域限定） */

</style>